<template>
    <el-dialog :model-value="props.value" title="外部参数" width="800px" @closed="props.closed">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" style="min-height: 200px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="数据类型" required prop="paramType">
                        <el-select
                            v-model="form.paramType"
                            placeholder="请选择数据类型"
                            :loading="typeLoading"
                            @change="form.definition = {}"
                        >
                            <el-option-group
                                v-for="group in typeNameList"
                                :key="group.label"
                                :label="group.label || '其他'"
                            >
                                <el-option
                                    v-for="item in group.options"
                                    :label="`${item.displayName} - ${item.typeName}`"
                                    :value="item.typeName"
                                    :key="item.id"
                                />
                            </el-option-group>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12"></el-col>
                <el-col :span="12" v-for="item in uiSchema" :key="item.name">
                    <FormSetterItem
                        :item="item"
                        :prop="['definition', item.name]"
                        v-model="form.definition[item.name]"
                    />
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="props.close">取消</el-button>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { type PopupBoxProps, tryJsonParse } from '@great/utils';
import { modelService } from '@great/services';
import { useRequest } from 'vue-request';
import { computed, reactive, watchEffect } from 'vue';
import { FormSetterItem, type MaterialProps } from '@great/designer';
import type { FormInstance, FormRules } from 'element-plus';

interface IProps extends PopupBoxProps {
    val: any;
    callback?: (payload: any) => void;
}

const props = defineProps<IProps>();
const formRef = useTemplateRef<FormInstance>('formRef');
const uiSchema = ref<MaterialProps[]>([]);
const form = ref({
    paramType: '',
    ...props.val,
    definition: tryJsonParse(props.val?.definition, {})
});
const rules = reactive<FormRules<any>>({
    paramType: [{ required: true, message: '请选择数据类型', trigger: ['change'] }]
});

const { data: typeData, loading: typeLoading } = useRequest(modelService.attribute.getTypeList, {
    cacheKey: 'attributeTypeList',
    staleTime: -1
});

const typeNameList = computed(() => {
    const types = {};
    Object.entries(typeData.value?.data || {}).forEach(([key, value]: any) => {
        types[value.persistType] = types[value.persistType] || [];
        types[value.persistType].push(value);
    });
    return Object.keys(types).map(label => {
        return {
            label,
            options: types[label]
        };
    });
});

function onSubmit() {
    formRef.value?.validate(valid => {
        if (valid) {
            props.callback?.({
                paramType: form.value.paramType,
                definition: JSON.stringify(form.value.definition)
            });
            props.close();
        }
    });
}
watchEffect(() => {
    uiSchema.value = JSON.parse(typeData.value?.data[form.value.paramType]?.uiSchema || '[]');
});
</script>

<style lang="scss" scoped></style>
